<template>
	<div class="wrapper" v-if="detail">
		<div class="header">
			<img :src="detail.productImg" alt="" />
			<div class="header__cont">
				<div class="header__cont__title">{{ detail.name }}</div>
				<div class="header__cont__hint">
					<p
						class="hint"
						v-for="hint in detail.productShortIntroduce
							.split(';')
							.filter((v) => v)"
						:key="hint"
					>
						<img
							src="https://file.meibaokeji.com/sp_test/2023/01/10/PD202301101606312.png"
							alt=""
						/>{{ hint }}
					</p>
					<!-- <p class="hint">
						<img
							src="https://file.meibaokeji.com/sp_test/2023/01/10/PD202301101606312.png"
							alt=""
						/>3人起保，最高可保120万
					</p>
					<p class="hint">
						<img
							src="https://file.meibaokeji.com/sp_test/2023/01/10/PD202301101606312.png"
							alt=""
						/>投保简便支持月单
					</p>
					<p class="hint">
						<img
							src="https://file.meibaokeji.com/sp_test/2023/01/10/PD202301101606312.png"
							alt=""
						/>社保用药免赔100元后90%赔付
					</p> -->
				</div>

				<div style="margin-block: 20px">
					<el-button type="primary" size="medium" @click="showPrompt = true"
						>立即投保</el-button
					>
					<!-- <el-button></el-button> -->
				</div>

				<div v-if="detail.occupationFile">
					<a :href="detail.occupationFile" target="_blank"
						><i class="el-icon-download"></i>下载职业类别表</a
					>
				</div>
			</div>
		</div>

		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane v-for="tab in tabs" :label="tab.label" :name="tab.name">
				<div v-html="detail[tab.name]" class="rich-cont"></div>
			</el-tab-pane>
		</el-tabs>

		<!-- <NoticeConfirm
			title="投保提醒"
			:visible.sync="showInstanceNotice"
			confirm-button-text="已知悉，我已告知投/被保险人并取得投/被保险人的同意"
			cancel-button-text="谢谢，投/被保险人不同意此告知"
			@confirm="onInstanceNoticeConfirm"
			@cancel="showInstanceNotice = false"
		>
			<div
				style="height: 440px; overflow-y: auto"
				v-html="detail.insuranceReminder"
			/>
		</NoticeConfirm> -->
		<NoticeConfirm
			title="投保声明"
			:visible.sync="showDeclaration"
			@confirm="onToInsure"
			@cancel="showDeclaration = false"
			:wait-duration="5"
		>
			<div
				style="height: 440px; overflow-y: auto"
				v-html="detail.insuranceDeclaration"
			/>
		</NoticeConfirm>
		<NoticeConfirm
			title="温馨提示"
			:visible.sync="showPrompt"
			@confirm="onPromptConfirm"
			@cancel="onPromptCancel"
			:confirm-button-text="checkTipTabNames.length ? '下一页' : '已知悉并同意'"
			:wait-duration="0"
		>
			<div>
				<p style="font-weight: blod">温馨提示，您即将进入投保流程:</p>
				<p>
					尊敬的客户，您将投保【<span style="color: red">{{ detail.name }}</span
					>】根据银保监发〔2020〕26号的监管规定，为了维护您的权益，您在投保过程中的完整操作轨迹将被记录，请您仔细阅读以下内容：
				</p>
				<el-tabs v-model="tipActiveName" @tab-click="handleTipActiveClick">
					<el-tab-pane
						v-for="tab in tipTabs"
						:label="tab.label"
						:name="tab.name"
					>
						<div
							style="height: 440px; overflow-y: auto"
							class="rich-cont"
							v-html="detail[tab.name]"
						></div>
					</el-tab-pane>
				</el-tabs>
			</div>
		</NoticeConfirm>
	</div>
</template>

<script>
import lodash from 'lodash'
import NoticeConfirm from '@/views/components/NoticeConfirm.vue'
import { productDetail } from '@/api'
import { routes } from '@/router'

export default {
	name: 'HomeView',
	data() {
		return {
			// camelCase: lodash.camelCase('foor_bar'),
			tipActiveName: 'specialAgreement',
			activeName: 'productIntroduction',
			checkTipTabNames: [],

			// 弹窗阅读
			showPrompt: false, // 温馨提示

			// showInstanceNotice: false, // 投保提醒
			showDeclaration: false,
			detail: null
		}
	},
	created() {
		productDetail(this.productId).then((res) => {
			this.detail = res.data

			// 开启录屏
			// const channel =
			// 	{
			// 		1: 'chinalife',
			// 		2: 'cpic',
			// 		3: 'picc-driving',
			// 		4: 'huanong'
			// 	}[this.detail.policyType] || this.productId

			const channel = this.productId
			const oldChannel = localStorage.getItem('channel')
			if (oldChannel !== channel) {
				localStorage.setItem('channel', channel)
				Recorder.renew()
			}
			if (Recorder.status() !== 'living') {
				Recorder.start({
					channel,
					compress: true,
					testServer: 'https://service.aiins.cn/insurance/api/open/putJsonV2'
				})
			}
		})

		// 温馨提示里有哪些tab未读
		this.checkTipTabNames = this.tipTabs.map((tab) => tab.name)
		this.tipActiveName = this.tipTabs[0].name
	},
	watch: {
		tipActiveName: {
			handler(val) {
				const checkNames = new Set(this.checkTipTabNames)
				// 移除展示过的tabname，用于校验是否全部展示
				checkNames.delete(val)
				this.checkTipTabNames = Array.from(checkNames)
			},
			immediate: true
		}
	},
	computed: {
		productId() {
			return this.$route.query.productId
		},
		tabs() {
			switch (this.productId) {
				case '113305':
					return [
						{
							name: 'productIntroduction',
							label: '保险详情'
						},
						{
							label: '客户告知书',
							name: 'insuranceReminder'
						},
						{
							label: '特别约定',
							name: 'specialAgreement'
						},
						{
							label: '投保须知',
							name: 'insuranceNotice'
						},
						{
							label: '理赔须知',
							name: 'claimsNotice'
						},
						{
							label: '责任免除',
							name: 'exclusion'
						}
					]
					break
				default:
					return [
						{
							name: 'productIntroduction',
							label: '保险详情'
						},
						{
							name: 'questions',
							label: '常见问题'
						},
						{
							name: 'specialAgreement',
							label: '特别约定'
						},
						{
							name: 'insuranceNotice',
							label: '投保须知'
						},
						// {
						// 	name: 'productIntroduction',
						// 	label: '产品说明'
						// },
						{
							name: 'claimsNotice',
							label: '理赔须知'
						},
						// {
						// 	name: 'disclaimer',
						// 	label: '免责声明'
						// },
						{
							name: 'exclusion',
							label: '责任免除'
						}
					]
			}
		},
		tipTabs() {
			switch (this.productId) {
				case '113305':
					return [
						{
							label: '客户告知书',
							name: 'insuranceReminder'
						},
						{
							label: '特别约定',
							name: 'specialAgreement'
						},
						{
							label: '投保须知',
							name: 'insuranceNotice'
						},
						{
							label: '理赔须知',
							name: 'claimsNotice'
						},
						{
							label: '责任免除',
							name: 'exclusion'
						}
					]
					break
				default:
					return [
						{
							name: 'specialAgreement',
							label: '特别约定'
						},
						{
							name: 'insuranceNotice',
							label: '投保须知'
						},
						{
							name: 'claimsNotice',
							label: '理赔须知'
						},
						{
							name: 'exclusion',
							label: '责任免除'
						}
					]
			}
		}
	},
	components: {
		NoticeConfirm
	},
	methods: {
		// 温馨提示
		onPromptConfirm() {
			if (this.checkTipTabNames.length) {
				this.tipActiveName = this.checkTipTabNames[0]
			} else if (this.detail.insuranceDeclaration) {
				this.showPrompt = false
				// this.showInstanceNotice = true
				this.showDeclaration = true
			} else {
				this.onToInsure()
			}
		},
		onPromptCancel() {
			this.showPrompt = false
			// 复原未读
			this.checkTipTabNames = this.tipTabs.slice().map((tab) => tab.name)
		},
		// 投保提醒
		// onInstanceNoticeConfirm() {
		// 	this.showInstanceNotice = false
		// 	this.showDeclaration = true
		// 	//...
		// },
		onToInsure() {
			const inputRoute = routes.find(
				({ name }) => name == 'I' + this.$route.query.productId
			)
			if (inputRoute) {
				this.$router.push({
					path: inputRoute.path
				})
			} else {
				this.$router.push({
					path: '/insure/input',
					query: {
						businessId: this.businessId,
						productId: this.$route.query.productId
					}
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.wrapper {
	padding: 20px;
}

.header {
	display: flex;
	align-items: stretch;
	margin-bottom: 10px;
	img {
		width: 400px;
		height: 300px;
	}
	&__cont {
		padding-left: 20px;

		&__title {
			margin-block: 10px;
			color: #000;
			font-size: 26px;
		}
		&__hint {
			margin-block: 10px;
			font-size: 16px;

			p {
				margin-block: 5px;
				img {
					width: 18px;
					height: 16px;
					margin-right: 4px;
					vertical-align: -2px;
				}
			}
		}

		a {
			color: #5f88ff;
		}
	}
}

.rich-cont {
	color: #353535;
	font-size: 14px;
	line-height: 2;

	::v-deep * {
		font-size: 14px !important;
	}
	::v-deep {
		img {
			max-width: 100%;
		}
	}
}
</style>
